<script setup lang="ts">
import { computed } from 'vue';
import { configProviderProps } from 'ant-design-vue/es/config-provider/context';
import { merge } from 'lodash-es';
import { ConfigProvider } from 'ant-design-vue';
import { useLocale } from '@/locales/useLocale';
import { useLayoutSettingStore } from '@/store/modules/layoutSetting';

defineOptions({
  name: 'ProConfigProvider',
});

const props = defineProps(configProviderProps());

const layoutSetting = useLayoutSettingStore();
const { getAntdLocale } = useLocale();

const theme = computed(() => {
  return merge({}, layoutSetting.themeConfig, props.theme);
});
</script>

<template>
  <ConfigProvider v-bind="$props" :locale="getAntdLocale" :theme="theme">
    <slot />
  </ConfigProvider>
</template>
